<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_container {
            position: absolute;
            z-index: 0;
            margin-left: 10px;
            margin-top: 25px;
            width: 95%;
            height: 620px;

        }

        #time {
            position: absolute;
            z-index: 50;
            margin-left: 19%;
            margin-top: 0%;
            top: 12%;
            width: 180px;
            height: 25px;
            background-color: #d1ecf1;
            border-style: solid;
            border: #1b1e21;
            border: 20px;
            font-size: 15px;
        }
    </style>
    <!-- jQuery -->
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=kM4US7f5QGd8TjKSk6jSAttHPCrIQzyG"></script>
    <script src="https://mapv.baidu.com/build/mapv.min.js"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.44/dist/mapvgl.threelayers.min.js"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my_style.css">

    <!-- 用于引入外部html -->
    <script src="../js/include.js"></script>

    <!-- 图标文件 -->
    <script src="../js/feather.min.js"></script>
</head>
<body>
<!-- 共用的navbar -->
<include src="navbar.html"></include>

<div class="container-fluid">
    <div class="row">
        <div id="time" ,class="time">
            <p id="date">16:51:48 | 每1.5秒自动刷新</p>
        </div>
        <!-- 共用的sidebar -->
        <include src="sidebar.html"></include>
        <!-- 主要内容 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="row">
                <div id="map_container"></div>
            </div>
            <script>
                // 6322,2363

                /* global BMapGL */

                /* global mapv */

                /* global mapvgl */

                /* global initMap */

                /* global purpleStyle */
                var bmap = new BMapGL.Map('map_container');
                var point = new BMapGL.Point(123.40538, 41.7386);
                bmap.centerAndZoom(point, 11);
                bmap.enableScrollWheelZoom();
                /* bmap.enable
                 var map = initMap({
                     tilt: 45,
                     heading: 0,
                     center: [123.40538,41.8386],
                     zoom: 11,
                     style: whiteStyle,
                     skyColors: [
                         // 地面颜色
                         'rgba(226, 237, 248, 0)',
                         // 天空颜色
                         'rgba(186, 211, 252, 1)'
                     ]
                 });*/

                var view = new mapvgl.View({
                    map: bmap
                });
                var layer = new mapvgl.PointLayer({
                    skyColors: ['rgba(226, 237, 248, 0)',
                        // 天空颜色
                        'rgba(186, 211, 252, 1)'],
                    blend: 'lighter',
                    title: 45,
                    heading: 0,
                });
                view.addLayer(layer);

                var honeycombLayer = new mapvgl.HoneycombLayer({
                    // 设置颜色梯度
                    gradient: {
                        0.0: 'rgb(50, 50, 256)',
                        0.1: 'rgb(50, 250, 56)',
                        0.5: 'rgb(250, 250, 56)',
                        1.0: 'rgb(250, 50, 56)'
                    },
                    // 是否显示文字
                    showText: true,
                    // 设置文字样式
                    textOptions: {
                        fontSize: 24,
                        color: '#444444',
                        format: function (count) {
                            return count >= 10000 ? Math.round(count / 1000) + 'k'
                                : count >= 1000 ? Math.round(count / 100) / 10 + 'k' : count;
                        }
                    },
                    height: 100, // 最大值的像素高度，为0时显示平面
                    // enableCluster: true, // 开启点聚合，建议数据量较大时打开，会提前根据地图级别将距离较近的点进行聚合
                    opacity: 0.1, // 透明度
                    maxZoom: 16, // 图层刷新最大地图级别，高于此值不再更新图层
                    minZoom: 6, // 图层刷新最小地图级别，低于此值不再更新图层
                    size: 50 // 蜂窝图像素宽度
                });
                view.addLayer(honeycombLayer);


                setInterval(function (args) {
                    $.ajax({
                        type: "POST",
                        url: '/count/print',
                        cache: false,
                        success: function (countList) {
                            var data = [];
                            for (var i = 0; i < countList.length; i++) {
                                //alert("调用了");
                                data.push({
                                    geometry: {
                                        type: 'Point',
                                        coordinates: [countList[i].longitude, countList[i].latitude]
                                    },
                                    properties: {
                                        count: countList.count
                                    }
                                });
                            }

                            honeycombLayer.setData(data);
                            // let time = countList[0].time;
                            // let hour =time.slice(8,10);
                            // let minute =time.slice(10,12);
                            // let second =time.slice(12,14);
                            // let show = hour + ":" + minute + ":" + second + " | 每5分钟自动刷新";
                            // $('#date').empty();
                            // $('#date').append(show);
                        }
                    });
                    $.ajax({
                        type: "POST",
                        url: "/count/time",
                        dataType: 'text',
                        async: false,
                        success: function (t) {
                            timee = t;
                            console.log("456");
                            console.log(t);
                            console.log("1412");
                            hour = timee.slice(8, 10);
                            minute = timee.slice(10, 12);
                            second = timee.slice(12, 14);
                            var show = hour + ":" + minute + ":" + second + "| 每1.5秒自动刷新";
                            $('#date').empty();
                            $('#date').append(show);
                        },
                        error: function () {
                        }
                    });
                }, 1500)

            </script>
        </main>
    </div>
</div>
<!--&lt;!&ndash;- Optional JavaScript &ndash;&gt;
&lt;!&ndash;-jQuery first, then Popper.js, then Bootstrap JS &ndash;&gt;-->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>